<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Menus in PyGTK</title>
<link rel="stylesheet" href="/cfg/format.css" type="text/css">
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<meta name="keywords" content="GUI, PyGTK, menus, Python, programming, Linux">
<meta name="description" content="Menus in PyGTK">
<meta name="language" content="en">
<meta name="author" content="Jan Bodnar">
<meta name="distribution" content="global">

<script type="text/javascript" src="/lib/jquery.js"></script>
<script type="text/javascript" src="/lib/common.js"></script>

</head>

<body>

<div class="container">

<div id="wide_ad" class="ltow">
<script type="text/javascript"><!--
google_ad_client = "pub-9706709751191532";
/* 160x600, August 2011 */
google_ad_slot = "2484182563";
google_ad_width = 160;
google_ad_height = 600;
//-->
</script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>
</div> 


<div class="content">


<a href="/" title="Home">Home</a>&nbsp;
<a href="..">Contents</a>


<h1>Menus in PyGTK</h1>

<p>
In this part of the PyGTK programming tutorial, we will work with menus.
</p>

<script type="text/javascript"><!--
google_ad_client = "pub-9706709751191532";
/* NewSquare */
google_ad_slot = "0364418177";
google_ad_width = 300;
google_ad_height = 250;
//-->
</script> 
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js"> 
</script>

<p>
A <b>menubar</b> is one of the most common parts of the GUI 
application. It is a group of commands located in various menus.
While in console applications you have to remember all those arcane commands, 
here we have most of the commands grouped into logical parts. These are accepted standards 
that further reduce the amount of time spent to learn a new application. 
</p>


<h2>Simple menu</h2>

<p>
In our first example, we will create a menubar with one file menu. 
The menu will have only one menu item. By selecting the item the application quits. 
</p>

<div class="codehead">simplemenu.py</div> 
<pre class="code">
#!/usr/bin/python

# ZetCode PyGTK tutorial 
#
# This example shows a simple menu
#
# author: jan bodnar
# website: zetcode.com 
# last edited: February 2009

import gtk


class PyApp(gtk.Window):

    def __init__(self):
        super(PyApp, self).__init__()

        self.set_title("Simple menu")
        self.set_size_request(250, 200)
        self.modify_bg(gtk.STATE_NORMAL, gtk.gdk.Color(6400, 6400, 6440))
        self.set_position(gtk.WIN_POS_CENTER)

        mb = gtk.MenuBar()

        filemenu = gtk.Menu()
        filem = gtk.MenuItem("File")
        filem.set_submenu(filemenu)
       
        exit = gtk.MenuItem("Exit")
        exit.connect("activate", gtk.main_quit)
        filemenu.append(exit)

        mb.append(filem)

        vbox = gtk.VBox(False, 2)
        vbox.pack_start(mb, False, False, 0)

        self.add(vbox)

        self.connect("destroy", gtk.main_quit)
        self.show_all()
        
        
PyApp()
gtk.main()
</pre>

<p>
This is a small example with minimal menubar functionality.
</p>

<pre class="explanation">
 mb = gtk.MenuBar()
</pre>

<p>
<b class="keyword">MenuBar</b> widget is created. 
</p>

<pre class="explanation">
 filemenu = gtk.Menu()
 filem = gtk.MenuItem("File")
 filem.set_submenu(filemenu)
</pre>

<p>
Toplevel <b class="keyword">MenuItem</b> is created. 
</p>

<pre class="explanation">
 exit = gtk.MenuItem("Exit")
 exit.connect("activate", gtk.main_quit)
 filemenu.append(exit)
</pre>

<p>
Exit <b class="keyword">MenuItem</b> is created and appended to the
File <b class="keyword">MenuItem</b>.
</p>

<pre class="explanation">
 mb.append(filem)
</pre>

<p>
Toplevel <b class="keyword">MenuItem</b> is appended to the <b class="keyword">MenuBar</b>
widget. 
</p>

<pre class="explanation">
 vbox = gtk.VBox(False, 2)
 vbox.pack_start(mb, False, False, 0)
</pre>

<p>
Unlike in other toolkits, we have to take care of the layout management
of the menubar ourselves. We put the menubar into a vertical box. 
</p>


<br>
<img src="/img/gui/pygtk/simplemenu.png" alt="Simple menu">
<div class="figure">Figure: Simple menu</div>
<br>


<h2>Image menu</h2>

<p>
In the next example, we will further explore the menus.
We will add images and accelerators to our menu items. 
<b>Accelerators</b> are keyboard shortcuts for activating a menu item. 
</p>

<div class="codehead">imagemenu.py</div> 
<pre class="code">
#!/usr/bin/python

# ZetCode PyGTK tutorial 
#
# This example shows a menu with
# images, accelerators and a separator
#
# author: jan bodnar
# website: zetcode.com 
# last edited: February 2009

import gtk


class PyApp(gtk.Window):

    def __init__(self):
        super(PyApp, self).__init__()

        self.set_title("Image menu")
        self.set_size_request(250, 200)
        self.modify_bg(gtk.STATE_NORMAL, gtk.gdk.Color(6400, 6400, 6440))
        self.set_position(gtk.WIN_POS_CENTER)

        mb = gtk.MenuBar()

        filemenu = gtk.Menu()
        filem = gtk.MenuItem("_File")
        filem.set_submenu(filemenu)
       
        agr = gtk.AccelGroup()
        self.add_accel_group(agr)

        newi = gtk.ImageMenuItem(gtk.STOCK_NEW, agr)
        key, mod = gtk.accelerator_parse("&lt;Control&gt;N")
        newi.add_accelerator("activate", agr, key, 
            mod, gtk.ACCEL_VISIBLE)
        filemenu.append(newi)

        openm = gtk.ImageMenuItem(gtk.STOCK_OPEN, agr)
        key, mod = gtk.accelerator_parse("&lt;Control&gt;O")
        openm.add_accelerator("activate", agr, key, 
            mod, gtk.ACCEL_VISIBLE)
        filemenu.append(openm)

        sep = gtk.SeparatorMenuItem()
        filemenu.append(sep)

        exit = gtk.ImageMenuItem(gtk.STOCK_QUIT, agr)
        key, mod = gtk.accelerator_parse("&lt;Control&gt;Q")
        exit.add_accelerator("activate", agr, key, 
            mod, gtk.ACCEL_VISIBLE)

        exit.connect("activate", gtk.main_quit)
        
        filemenu.append(exit)

        mb.append(filem)

        vbox = gtk.VBox(False, 2)
        vbox.pack_start(mb, False, False, 0)

        self.add(vbox)

        self.connect("destroy", gtk.main_quit)
        self.show_all()
        

PyApp()
gtk.main()
</pre>

<p>
Our example shows a toplevel menu item with three sublevel menu items. Each of the
menu items has a image and an accelerator. The accelerator for the quit menu item
is active. 
</p>

<pre class="explanation">
 agr = gtk.AccelGroup()
 self.add_accel_group(agr)
</pre>

<p>
To work with accelerators, we create a global <b class="keyword">AccelGroup</b>
object. It will be used later.  
</p>

<pre class="explanation">
 newi = gtk.ImageMenuItem(gtk.STOCK_NEW, agr)
</pre>

<p>
<b class="keyword">ImageMenuItem</b> is created. The image comes from the stock
of images. 
</p>

<pre class="explanation">
 key, mod = gtk.accelerator_parse("&lt;Control&gt;N")
</pre>

<p>
The <b class="keyword">gtk.accelerator_parse()</b> function parses the specified 
accelerator string and returns a 2-tuple containing the keyval 
and modifier mask corresponding to accelerator. 
</p>

<pre class="explanation">
 newi.add_accelerator("activate", agr, key, 
     mod, gtk.ACCEL_VISIBLE)
</pre>

<p>
This creates an Ctrl+Q accelerator for the exit menu item. 
</p>

<pre class="explanation">
 sep = gtk.SeparatorMenuItem()
 filemenu.append(sep)
</pre>

<p>
These lines create a separator. It is used to group menu items
into logical groups. 
</p>


<br>
<img src="/img/gui/pygtk/imagemenu.png" alt="Image menu">
<div class="figure">Figure: Image menu</div>
<br>


<h2>CheckMenuItem</h2>

<p>
A <b class="keyword">CheckMenuItem</b> is a menu item with a check box. 
It can be used to work with boolean properties. 
</p>

<div class="codehead">checkmenuitem.py</div>
<pre class="code">
#!/usr/bin/python

# ZetCode PyGTK tutorial 
#
# This example shows how to 
# use a CheckMenuItem
#
# author: jan bodnar
# website: zetcode.com 
# last edited: February 2009


import gtk


class PyApp(gtk.Window):

    def __init__(self):
        super(PyApp, self).__init__()

        self.set_title("Check menu item")
        self.set_size_request(250, 200)
        self.modify_bg(gtk.STATE_NORMAL, gtk.gdk.Color(6400, 6400, 6440))
        self.set_position(gtk.WIN_POS_CENTER)

        mb = gtk.MenuBar()

        filemenu = gtk.Menu()
        filem = gtk.MenuItem("File")
        filem.set_submenu(filemenu)
       
        viewmenu = gtk.Menu()
        view = gtk.MenuItem("View")
        view.set_submenu(viewmenu)

        stat = gtk.CheckMenuItem("View Statusbar")
        stat.set_active(True)
        stat.connect("activate", self.on_status_view)
        viewmenu.append(stat)
       
        exit = gtk.MenuItem("Exit")
        exit.connect("activate", gtk.main_quit)
        filemenu.append(exit)

        mb.append(filem)
        mb.append(view)

        self.statusbar = gtk.Statusbar()
        self.statusbar.push(1, "Ready")

        vbox = gtk.VBox(False, 2)
        vbox.pack_start(mb, False, False, 0)
        vbox.pack_start(gtk.Label(), True, False, 0)
        vbox.pack_start(self.statusbar, False, False, 0)

        self.add(vbox)

        self.connect("destroy", gtk.main_quit)
        self.show_all()
        
        
    def on_status_view(self, widget):
        if widget.active: 
            self.statusbar.show()
        else:
            self.statusbar.hide()
        

PyApp()
gtk.main()
</pre>

<p>
In our code example we show a check menu item. If the check box is activated,
the statusbar widget is shown. If not, the statusbar is hidden.  
</p>

<pre class="explanation">
 stat = gtk.CheckMenuItem("View Statusbar")
</pre>

<p>
<b class="keyword">CheckMenuItem</b> widget is created. 
</p>

<pre class="explanation">
 stat.set_active(True)
</pre>

<p>
The <b class="keyword">set_active()</b> method checks/unchecks the 
check menu item. 
</p>

<pre class="explanation">
 if widget.active: 
     self.statusbar.show()
 else:
     self.statusbar.hide()
</pre>

<p>
Depending on the active property of the <b class="keyword">CheckMenuItem</b>, 
we show or hide the statusbar widget. 
</p>


<br>
<img src="/img/gui/pygtk/checkmenuitem.png" alt="CheckMenuItem">
<div class="figure">Figure: CheckMenuItem</div>
<br>

<h2>Submenu</h2>

<p>
Our final example demonstrates how to create a submenu in PyGTK. 
</p>

<div class="codehead">submenu.py</div>
<pre class="code">
#!/usr/bin/python

# ZetCode PyGTK tutorial 
#
# This example shows a submenu
#
# author: jan bodnar
# website: zetcode.com 
# last edited: February 2009


import gtk


class PyApp(gtk.Window):

    def __init__(self):
        super(PyApp, self).__init__()

        self.set_title("Submenu")
        self.set_size_request(250, 200)
        self.modify_bg(gtk.STATE_NORMAL, gtk.gdk.Color(6400, 6400, 6440))
        self.set_position(gtk.WIN_POS_CENTER)

        mb = gtk.MenuBar()

        filemenu = gtk.Menu()
        filem = gtk.MenuItem("File")
        filem.set_submenu(filemenu)
       
        mb.append(filem)
        
        imenu = gtk.Menu()

        importm = gtk.MenuItem("Import")
        importm.set_submenu(imenu)

        inews = gtk.MenuItem("Import news feed...")
        ibookmarks = gtk.MenuItem("Import bookmarks...")
        imail = gtk.MenuItem("Import mail...")

        imenu.append(inews)
        imenu.append(ibookmarks)
        imenu.append(imail)

        filemenu.append(importm)
        
        exit = gtk.MenuItem("Exit")
        exit.connect("activate", gtk.main_quit)
        filemenu.append(exit)

        vbox = gtk.VBox(False, 2)
        vbox.pack_start(mb, False, False, 0)

        self.add(vbox)

        self.connect("destroy", gtk.main_quit)
        self.show_all()
        
       
PyApp()
gtk.main()
</pre>

<p>
Submenu creation. 
</p>

<pre class="explanation">
 imenu = gtk.Menu()
</pre>

<p>
A submenu is a <b class="keyword">Menu</b>. 
</p>

<pre class="explanation">
 importm = gtk.MenuItem("Import")
 importm.set_submenu(imenu)
</pre>

<p>
It is a submenu of a menu item, which belogs to toplevel
file menu. 
</p>

<pre class="explanation">
 inews = gtk.MenuItem("Import news feed...")
 ibookmarks = gtk.MenuItem("Import bookmarks...")
 imail = gtk.MenuItem("Import mail...")

 imenu.append(inews)
 imenu.append(ibookmarks)
 imenu.append(imail)
</pre>

<p>
Submenu has it's own menu items. 
</p>


<br>
<img src="/img/gui/pygtk/submenu.png" alt="Submenu">
<div class="figure">Figure: Submenu</div>

<hr class="btm">

<p>
In this chapter of the PyGTK programming library, we showed, how to work with menus. 
</p>


<br>
<div class="center"> 
<script type="text/javascript"><!--
google_ad_client = "pub-9706709751191532";
/* horizontal */
google_ad_slot = "1734478269";
google_ad_width = 468;
google_ad_height = 60;
//-->
</script> 
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js"> 
</script> 
</div> 
<br>


<div class="botNav, center">
<span class="botNavItem"><a href="/">Home</a></span> ‡ <span class="botNavItem"><a href="..">Contents</a></span> ‡
<span class="botNavItem"><a href="#">Top of Page</a></span>
</div>


<div class="footer">
<div class="signature">
<a href="/">ZetCode</a> last modified February 8, 2009  <span class="copyright">&copy; 2007 - 2012 Jan Bodnar</span>
</div>
</div>

</div> <!-- content -->

</div> <!-- container -->

</body>
</html>

